<template>
	<view class="confirm">
		<dispatchWay :address="address"></dispatchWay>
		<view class="goodsList">
			<goodsList :item="data"></goodsList>
		</view>
		<!-- 除了微信小程序才显示 -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="payType">
			<view class="box" :class="item.value==way ? 'active' : '' " v-for="item in payType"
				@click="clickWay(item.value)">
				<u-icon :name="item.value=='alipay' ?'zhifubao': '' " size="26" color="#1578ff"></u-icon>
				<u-icon :name="item.value=='wxpay' ?'weixin-fill': '' " size="26" color="#04c15f"></u-icon>
				<text class="font">{{item.name}}</text>
			</view>
		</view>
		<!-- #endif -->

		<view class="bottom">
			<car :type="true" :userInfo="userInfo" :addressDefault="address" :way="way"></car>
		</view>
	</view>
</template>

<script>
	import {
		GetStroage
	} from "@/utils/tool.js"
	import {
		mapGetters,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				// #ifdef APP-PLUS||H5
				way: "alipay",
				// #endif
				// #ifdef MP-WEIXIN
				way: "wxpay",
				// #endif
				payType: [{
					name: "支付宝",
					value: "alipay"
				}, {
					name: "微信",
					value: "wxpay"
				}],
				data: "",
				address: {},
				userInfo: {},
			};
		},
		onShow() { //接收传来的参数
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on("getData", res => {
				this.data = res;
				// console.log("---", this.data);
				this.$set(this.data, "cheap", this.cheap); //响应式添加属性【cheap是getters暴露在外面的,其他页面调用用this】
				console.log("接收的参数", this.data);
			});
			this.userInfo = GetStroage("userInfo");
			this.getAddress(this.userInfo.id);
		},
		computed: {
			...mapGetters(["addressObj", "cheap"]),
		},
		methods: {
			getAddress(id) {
				uni.request({
					url: this.$e.Url + "/address/getUserDefault",
					data: {
						uid: id
					},
					method: 'GET',
					header: {
						"Content-Type": "application/json"
					},
					success: (res) => {
						console.log("请求API接口【/address/getUserDefault】", res);
						this.address = res.data;
					}
				})
			},
			clickWay(value) {
				this.way = value;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("/static/userbackground.jpg");
		background-size: cover;
		background-repeat: repeat;
		background-position: center center;
	}

	.confirm {
		margin: 20rpx;

		.goodsList {
			border-top: 1rpx solid #eee;
			// margin: 0rpx 0 0 0;
		}

		.payType {
			@include flex-box();

			.box {
				margin: 20rpx;
				width: 48%;
				height: 75rpx;
				background: #ffffff;
				border-radius: 10rpx;
				@include flex-box-set();
				border: 1px solid #fff;
				filter: grayscale(100%);

				.font {
					padding: 0 0 0 10rpx;
				}

			}

			.box:first-child.active {
				border-color: #1578ff;
				color: #1578ff;
				filter: grayscale(0%);
			}

			.box:last-child.active {
				border-color: #04c15f;
				color: #04c15f;
				filter: grayscale(0%);
			}
		}

		.bottom {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
		}
	}
</style>
